<template>
  <div id="app">
    <div class="header">
      <div class="content">
        <div class="logo"></div>
        <ul class="nav">
          <li><router-link to="/index">首页 </router-link></li>
          <li><router-link to="/agents">房产经纪 </router-link></li>
          <li><router-link to="/category">地产分类 </router-link></li>
          <li><router-link to="/page">关于我们 </router-link></li>
        </ul>
      </div>
    </div>

    <router-view></router-view>

    <!-- 底部 -->
    <div class="box-card">
      <div class="certer">
        <ul class="spj">
          <li class="regards">abc-赛品件</li>
          <li>共同打造的上亿旅游行者"旅游神器"</li>
          <li><i class="batlu">60,000</i>多个的地</li>
          <li><i class="batlu">60,000</i>个多个全球旅地新玩法</li>
          <li><i class="batlu">760000,000</i>次攻略下载</li>
          <li><i class="batlu">38,000</i>家旅游产生全球旅游目品供应商</li>
        </ul>
        <ul>
          <li class="regards">关于我们</li>
          <li>隐私政策 商标声明</li>
          <li>商城平台服务协议</li>
          <li>网络信息侵权通知指引</li>
          <li>旅游旅游网服务监督员</li>
          <li>网站地图加入</li>
        </ul>
        <ul>
          <li class="regards">旅游服务</li>
          <li>旅游攻略 酒店预定</li>
          <li>旅游特价 国际租车</li>
          <li>旅游问答 旅游保险</li>
          <li>旅游指南 订火车票</li>
          <li>旅游咨询 App下载</li>
        </ul>
        <!-- 二维码 -->
        <ul>
          <li>
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F07%2F20200407145755_dfjol.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649130494&t=32b47a6b53de0a9d7804723e0c600e7a"
              alt=""
              width="120px"
              height="120px"
            />
          </li>
          <li class="attention">关注我们</li>
        </ul>
      </div>
      <!-- 边框 -->
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
 
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

input,
select,
textarea {
  -webkit-appearance: none;
  /*去掉webkit默认的表单样式*/
}

/* 表单控件没有亮线 */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  outline: none;
  font: inherit;
  border: none;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}
/* 头部 */

.header {
  background-color: #fff;
  box-shadow: #cecece 0px 1px 4px 0px;
}


.content {
  width: 60%;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
}

.content .logo {
  display: inline-block;
  width: 70px;
  height: 60px;
  margin-right: 50px;
  background-image: url(https://www.cnlogo8.com/d/file/202202/kzzxsndxnye.jpg);
  background-size: cover;
}

.content .nav {
  display: inline-block;
}

.content .nav li {
  float: left;
  margin-left: 60px;
}
.content {
  display: flex;
  align-items: center;
  .nav {
    li {
      color: #555;
      padding: 10px;
      a:hover {
        color: aqua;
      }
    }
  }
 
  .router-link-active {
    color: aqua;
     border-bottom: 1px solid aqua;
  }
}

// 底部
.attention {
  margin-left: 20px;
}
.regards {
  font-size: 18px;
  margin-bottom: 10px;
}
.batlu {
  font-style: normal;
  color: #c18232;
}

.box-card {
  width: 100%;
  height: 158px;
  padding-top: 10px;
  background-color: #333335;
  .certer {
    display: flex;
    justify-content: center;
    ul {
      margin: 0 30px;
      li {
        font-size: 14px;
        line-height: 1.5;
        list-style: none;
        color: white;
      }
      .attention{
        color: #555;
      }
    }
  }
  
 
}

</style>

